<template>
  <div id="login" class="full-screen">
    <vue-particles class="particles"
                   color="#dedede"
                   :particleOpacity="0.9"
                   :particlesNumber="100"
                   shapeType="circle"
                   :particleSize="4"
                   linesColor="#dedede"
                   :linesWidth="1"
                   :lineLinked="true"
                   :lineOpacity="0.4"
                   :linesDistance="150"
                   :moveSpeed="3"
                   :hoverEffect="true"
                   hoverMode="grab"
                   :clickEffect="true"
                   clickMode="push"
    >
    </vue-particles>

    <div class="login-form">
      <el-form :model="loginForm" ref="loginFormRef" :rules="loginRules">
        <h3 class="title">Login</h3>

        <el-form-item prop="username">
          <el-input v-model="loginForm.username" type="text" placeholder="账号">
            <template #prefix>
              <svg-icon icon-class="user"/>
            </template>
          </el-input>
        </el-form-item>

        <el-form-item prop="password">
          <el-input v-model="loginForm.password" type="password" placeholder="密码" @keyup.enter.native="handleLogin">
            <template #prefix>
              <svg-icon icon-class="password"/>
            </template>
          </el-input>
        </el-form-item>

        <!--        <el-form-item prop="code" v-if="captchaEnabled">-->
        <!--          <el-input v-model="loginForm.code" auto-complete="off" placeholder="验证码" style="width: 63%"-->
        <!--                    @keyup.enter.native="handleLogin">-->
        <!--            <template #prefix>-->
        <!--              <svg-icon icon-class="validCode"/>-->
        <!--            </template>-->
        <!--          </el-input>-->

        <!--          <div class="login-code">-->
        <!--            <img :src="codeUrl" @click="getCode" class="login-code-img"/>-->
        <!--          </div>-->
        <!--        </el-form-item>-->

        <el-checkbox v-model="loginForm.rememberMe" style="margin:-5px 0px 20px 0px;">记住密码</el-checkbox>

        <el-form-item style="width:100%;">
          <el-button :loading="loading" size="default" type="primary" style="width:100%;height: 38px;"
                     @click.native.prevent="handleLogin">
            <span v-if="!loading">登 录</span>
            <span v-else>登 录 中...</span>
          </el-button>

          <div style="float: right;" v-if="register">
            <router-link class="link-type" :to="'/register'">立即注册</router-link>
          </div>
        </el-form-item>

      </el-form>
    </div>
  </div>
</template>

<script>
import {getToken} from '@/utils/auth'

export default {
  name: "Login",

  created() {
    if (getToken() && getToken() !== undefined) {
      this.$router.push('/')
    }
  },

  mounted() {
    // this.drawBackground()
  },

  data() {
    return {
      codeUrl: '',
      loading: false,
      register: true,
      captchaEnabled: true,
      redirect: '',

      loginRules: {
        username: [
          {required: true, trigger: "blur", message: "请输入您的账号"}
        ],
        password: [
          {required: true, trigger: "blur", message: "请输入您的密码"}
        ],
        code: [{required: true, trigger: "change", message: "请输入验证码"}]
      },

      loginForm: {
        username: "union",
        password: "12345",
        code: '111',
      },
    }
  },

  methods: {
    handleLogin() {
      this.$refs.loginFormRef.validate(valid => {
        if (!valid) return;
        this.loading = true;
        this.$store.dispatch("Login", this.loginForm)
            .then((res) => {
              this.$router.push({path: this.redirect || "/"});
            })
            .catch(() => {
              this.loading = false;
            });
      })
    },

    //
  }

}
</script>

<style scoped lang="scss">
#login {
  width: 100%;
  height: 100vh;
  background: linear-gradient(125deg, #2c3e50, #27ae60, #2980b9, #e74c3c, #8e44ad);
  background-size: 500%;
  animation: bgAnimation 15s linear infinite;
}

@keyframes bgAnimation {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

.particles {
  overflow: hidden;
  width: 100%;
  height: 100vh;
}

.title {
  margin: 0px auto 30px auto;
  text-align: center;
  color: #707070;
}

.login-form {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border-radius: 6px;
  background: #ffffff;
  width: 400px;
  padding: 25px 25px 5px 25px;
  background-color: rgba(255, 255, 255, 0.9);

  .el-input {
    height: 38px;

    input {
      height: 38px;
    }
  }

  .input-icon {
    height: 39px;
    width: 14px;
    margin-left: 2px;
  }
}

.login-code-img {
  height: 38px;
}

.login-code {
  width: 33%;
  height: 38px;
  float: right;

  img {
    cursor: pointer;
    vertical-align: middle;
  }
}
</style>
